<template>
  <a-drawer v-model:visible="visible" title="微信用户详情" :width="width >= 580 ? 580 : '100%'" :footer="false">
    <a-descriptions :column="2" size="large" class="general-description">
      <a-descriptions-item label="微信openId" :span="2">
        <a-typography-paragraph copyable>{{ dataDetail?.openId }}</a-typography-paragraph>
      </a-descriptions-item>
      <a-descriptions-item label="昵称">
        <Avatar :src="dataDetail?.avatar" :name="dataDetail?.nickname" :size="40">
        </Avatar>
        {{ dataDetail?.nickname }}
      </a-descriptions-item>
      <a-descriptions-item label="性别">
        <GiCellGender :gender="dataDetail?.gender"></GiCellGender>
      </a-descriptions-item>
      <a-descriptions-item label="国家">{{ dataDetail?.country }}</a-descriptions-item>
      <a-descriptions-item label="省份">{{ dataDetail?.province }}</a-descriptions-item>
      <a-descriptions-item label="城市">{{ dataDetail?.city }}</a-descriptions-item>
      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script lang="ts" setup>
import { getWechatUser, type WechatUserDetailResp } from '@/apis/website/wechatUser';
import { useWindowSize } from '@vueuse/core';

const { width } = useWindowSize()

const visible = ref(false)
const dataId = ref('')
const dataDetail = ref<WechatUserDetailResp>()
// 查询详情
const getDataDetail = async () => {
  const res = await getWechatUser(dataId.value)
  dataDetail.value = res.data
}

// 打开详情
const onDetail = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
}

defineExpose({ onDetail })
</script>

<style lang="scss" scoped></style>
